 var box = document.querySelector(".box");
      var zuo = document.querySelector(".left");
      var you = document.querySelector(".right");
      var uu = box.querySelector("ul");
      var oll = box.querySelector("ol");
      var mm = box.offsetWidth;
      var circle = 0;
      box.addEventListener("mouseenter", function () {
        zuo.style.display = "block";
        you.style.display = "block";
        clearInterval(time);
      });
      box.addEventListener("mouseleave", function () {
        zuo.style.display = "none";
        you.style.display = "none";
        time = setInterval(function () {
          you.click();
        }, 2000);
      });

      for (var i = 0; i < uu.children.length; i++) {
        var li = document.createElement("li");
        li.setAttribute("index", i);
        oll.appendChild(li);
        oll.children[0].innerHTML = "1";
        li.addEventListener("click", function () {
          for (var i = 0; i < oll.children.length; i++) {
            oll.children[i].className = "";
            oll.children[i].innerHTML = "";
            oll.children[i].className = "";
          }
          this.className = "bg";
          var index = this.getAttribute("index");
          oll.children[index].innerHTML = Number(index) + 1;
          oll.children[index].className = "bg";
          num = index;
          circle = index;
          hh(uu, -index * mm);
        });
      }

      // console.log(oll.children);
      // console.log(circle + 1);
      oll.children[0].className = "bg";
      var first = uu.children[0].cloneNode(true);
      uu.appendChild(first);
      var num = 0;

      you.addEventListener("click", function () {
        if (num == uu.children.length - 1) {
          uu.style.left = "0";
          num = 0;
        }
        num++;
        hh(uu, -num * mm);
        circle++;

        if (circle == oll.children.length) {
          circle = 0;
        }

        circlechange();
      });
      zuo.addEventListener("click", function () {
        if (num == 0) {
          num = uu.children.length - 1;
          uu.style.left = -num * mm + "px";
        }
        num--;
        hh(uu, -num * mm);
        circle--;
        if (circle < 0) {
          circle = oll.children.length - 1;
        }

        circlechange();
      });
      function circlechange() {
        for (var i = 0; i < oll.children.length; i++) {
          oll.children[i].className = "";
          oll.children[i].innerHTML = "";
        }
        oll.children[circle].className = "bg";
        oll.children[circle].innerHTML = circle + 1;
      }
      var time = setInterval(function () {
        you.click();
      }, 2000);